<template>
  <div id="main"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      myChart: null
    }
  },
  mounted() {
    this.initEcharts()
  },
  methods: {
    initEcharts() {
      const chartDom = document.getElementById('main')
      this.myChart = echarts.init(chartDom)
    },
    setEChartsOptions(data) {
      let option
      let xAxisData = [];
      let data1 = [];
      let data2 = [];
      xAxisData=[...data.labels]
      data.data.forEach(item=>{
        data1.push(item.total_count)
        data2.push(item.resolve_count)
      })
      const emphasisStyle = {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: '#1890ff'
        }
      }
      option = {
        // title: {
        //   text: '问题反馈数'
        // },
        legend: {
          data: ['问题提交数', '问题解决数'],
          bottom: "0%"
        },
        tooltip: {
          trigger:"item",
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          name: ''
        },
        yAxis: {},
        grid: {
          left:50,
          right:50
        },
        series: [
          {
            name: '问题提交数',
            type: 'bar',
            emphasis: emphasisStyle,
            data: data1,
            label: {
              show: true,
              position:'top'
            }
          },
          {
            name: '问题解决数',
            type: 'bar',
            emphasis: emphasisStyle,
            data: data2,
            label: {
              show: true,
              position:'top'
            }
          }
        ]
      };
      this.myChart && this.myChart.setOption(option);
    },
  },
}
</script>

<style lang="scss" scoped>
#main {
  width: 100%;
  height: 500px;
}
</style>
